<template>
    <div>
        <el-text size="large">个人信息</el-text>
        <el-divider style="margin: 10px 0;"></el-divider>
        <el-form label-position="right"
            label-width="120px"
            :model="accountForm"
            :rules="rules"
            ref="accountFormRef"
            style="max-width: 75%; margin: 0 auto;">
            <el-form-item>
                <el-avatar size="large" :icon="UserFilled"></el-avatar>
            </el-form-item>
            <el-form-item label="账号ID">
                <el-input v-model="accountForm.account_id" disabled></el-input>
            </el-form-item>
            <el-form-item label="账号昵称" prop="account_nickname">
                <el-input v-model="accountForm.account_nickname" placeholder="请输入账号昵称"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="account_password">
                <el-input v-model="accountForm.account_password" type="password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="权限等级">
                <el-input v-model="accountForm.permission_level" disabled>
                    <template #append>
                        <el-tag>{{ accountForm.permission_level === 0 ? '超级管理员' : '普通管理员' }}</el-tag>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="full_name">
                <el-input v-model="accountForm.full_name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="accountForm.gender as any">
                    <el-radio-button label="男" :value="true"></el-radio-button>
                    <el-radio-button label="女" :value="false"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="联系方式" prop="contact_info">
                <el-input v-model="accountForm.contact_info" placeholder="请输入联系方式"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="accountForm.remarks" placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateAccountInfo" :loading="loading">更新信息</el-button>
            </el-form-item>
        </el-form>
        <el-divider style="margin: 10px 0;"></el-divider>
    </div>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue';
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import type { EmployeeQueryForm } from '@/types/interface';

const accountForm = reactive<EmployeeQueryForm>({
    account_id: null as any,
    account_nickname: '',
    account_password: '',
    permission_level: null,
    full_name: '',
    gender: null,
    contact_info: '',
    remarks: ''
});

const rules = reactive({
    account_nickname: [
        { required: true, message: '账号昵称不能为空', trigger: 'blur' },
        { min: 1, max: 20, message: '账号昵称长度在1到20个字符之间', trigger: 'blur' }
    ],
    account_password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
    ],
    full_name: [
        { required: true, message: '姓名不能为空', trigger: 'blur' },
        { min: 1, max: 20, message: '姓名长度在1到20个字符之间', trigger: 'blur' }
    ],
    contact_info: [
        { required: true, message: '联系方式不能为空', trigger: 'blur' },
        { min: 1, max: 20, message: '联系方式长度在1到20个字符之间', trigger: 'blur' }
    ]
});

const loading = ref(false);
const accountFormRef = ref();
const router = useRouter();

// 获取账号信息
async function fetchAccountInfo() {
    try {
        const token = localStorage.getItem('token');
        const response = await axios.get('/api/account', {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        Object.assign(accountForm, response.data);
        accountForm.account_nickname = localStorage.getItem('username')!;
        accountForm.account_password = localStorage.getItem('password')!;
    } catch (error) {
        console.error('获取账号信息失败:', error);
    }
}

// 更新账号信息
async function updateAccountInfo() {
    try {
        loading.value = true;
        await accountFormRef.value.validate();
        const token = localStorage.getItem('token');
        await axios.put('/api/account', accountForm, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        localStorage.setItem('username', accountForm.account_nickname);
        localStorage.setItem('password', accountForm.account_password);
        fetchAccountInfo();
        ElMessage.success('更新成功');
    } catch (error: any) {
        console.error('更新账号信息失败:', error);
        ElMessage.error('更新失败 ' + error.response.data.error);
    } finally {
        loading.value = false;
    }
}

onMounted(() => {
    fetchAccountInfo();
});
</script>

<style scoped>
.el-form-item {
    margin: 20px;
}
.el-input,
.el-button {
    width: 100%;
}
.el-form {
    padding: 20px;
}
.el-form-item .el-form-item__label {
    padding-right: 20px;
}

::v-deep.el-radio-button{
  .el-radio-button__inner {
    width: 12rem;
  }
}
</style>